<template>
  <div class="home-icons">
    <slider :pagination="false">
      <swiper-slide v-for="(item,index) of pages" :key="index" class="page">
        <div class="icon-item" v-for="subItem of item" :key="subItem.id">
          <div class="img-wrapper">
            <img :src="subItem.imgUrl" alt="" class="icon-img">
          </div>
          <div class="icon-des">{{subItem.desc}}</div>
        </div>
      </swiper-slide>
    </slider>
  </div>
</template>
<script>
import slider from '@/base/slider'
export default {
  name: 'homeIcon',
  props: {
    info: Array
  },
  components: {
    slider
  },
  computed: {
    pages () {
      let arr = []
      this.info.forEach((item, index) => {
        let floor = Math.floor(index / 8)
        if (!arr[floor]) {
          arr[floor] = []
        }
        arr[floor].push(item)
      })
      return arr
    }
  }
}
</script>
<style lang="stylus" scoped>
.home-icons
  margin-top 10px
  height 0
  width 100%
  padding-bottom 50%
  .page
    display flex
    flex-wrap wrap
    .icon-item
      width 25%
      height 0
      padding-bottom 25%
      font-size 18px
      .img-wrapper
        padding-left 20px
        padding-right 20px
        .icon-img
          width 100%
          height 100%
      .icon-des
        text-align center
</style>
